import Link from "next/link"

import { Button } from "~/registry/default/ui/button"
import {
   Card,
   CardContent,
   CardDescription,
   CardHeader,
   CardTitle,
} from "~/registry/default/ui/card"
import { Input } from "~/registry/default/ui/input"
import { Label } from "~/registry/default/ui/label"

export const description =
   "A login form with email and password. There's an option to login with Google and a link to sign up if you don't have an account."

export const iframeHeight = "600px"

export const containerClassName =
   "w-full h-screen flex items-center justify-center px-4"

export default function LoginForm() {
   return (
      <Card className="mx-auto max-w-sm">
         <CardHeader>
            <CardTitle className="text-2xl">Login</CardTitle>
            <CardDescription>
               Enter your email below to login to your account
            </CardDescription>
         </CardHeader>
         <CardContent>
            <div className="grid gap-4">
               <div className="grid gap-2">
                  <Label htmlFor="email">Email</Label>
                  <Input
                     id="email"
                     type="email"
                     placeholder="m@example.com"
                     required
                  />
               </div>
               <div className="grid gap-2">
                  <div className="flex items-center">
                     <Label htmlFor="password">Password</Label>
                     <Link
                        href="#"
                        className="ml-auto inline-block text-sm underline"
                     >
                        Forgot your password?
                     </Link>
                  </div>
                  <Input id="password" type="password" required />
               </div>
               <Button type="submit" className="w-full">
                  Login
               </Button>
               <Button variant="outline" className="w-full">
                  Login with Google
               </Button>
            </div>
            <div className="mt-4 text-center text-sm">
               Don&apos;t have an account?{" "}
               <Link href="#" className="underline">
                  Sign up
               </Link>
            </div>
         </CardContent>
      </Card>
   )
}
